﻿@{

    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>供应商管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.9.17/dist/css/layui.css" rel="stylesheet">
</head>
<body>
 <form class="layui-form" style="display: flex; align-items: center;">
    <div style="margin-right: 10px;">
        供应商编码<input type="text" id="VendorCode" style="width:170px" placeholder="请输入供应商编码" class="layui-input" lay-affix="clear">
    </div>
    <div style="margin-right: 10px;">
        供应商名称<input type="text" id="VendorName" style="width:170px" placeholder="请输入供应商名称" lay-affix="clear" class="layui-input">
    </div>
    <div style="margin-right: 10px;">
        供应商简称<input type="text" id="VendorNick" style="width:170px" placeholder="请输入供应商简称" lay-affix="clear" class="layui-input">
    </div>
    <div>
        <button class="layui-btn" lay-submit lay-filter="demo-table-search">搜索</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
    <div style="padding: 16px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>
   <div style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);">
    <button class="layui-btn" onclick="add()">确定</button>
    <button class="layui-btn layui-btn-danger" onclick="cancel()">取消</button>
</div>
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="//unpkg.com/layui@2.9.17/dist/layui.js"></script>
    <script>
          var table = layui.table;
            var dropdown = layui.dropdown;
            var layer = layui.layer;
        function cancel() {
            var index = parent.layer.getFrameIndex(window.name);//先得到当前iframe层的索引
            parent.layer.close(index);//再执行关闭
        }
        function add() {
            // 获取选中行数据并将名称传给父页面 
            var checkStatus = table.checkStatus('test');
            var data = checkStatus.data;
            console.log(data[0]);
            if (data.length == 0) {
                layer.msg("请选择数据");
                return;
            }
            if (data.length > 1) {
                layer.msg("只能选择一行数据");
                return; 
            }
          
            var vendorName = data[0].VendorName;
            var vendorCode = data[0].VendorCode;
            var vendorId = data[0].Id;
            var vendorNick = data[0].VendorNick;
            // 通过父页面的接口将供应商名称传给父页面   
       sessionStorage.setItem("vendorNameFromPopup", vendorName);
            sessionStorage.setItem("vendorCodeFromPopup", vendorCode);
            sessionStorage.setItem("vendorIdFromPopup", vendorId);
            sessionStorage.setItem("vendorNickFromPopup", vendorNick);
            // 关闭当前弹出层
            cancel();
        }
        layui.use(function () {
            function getCheckData() {
                // 创建渲染实例
                table.render({
                    elem: '#test',
                    url: '/MainData/MdVendorList', // 此处为静态模拟数据，实际使用时需换成真实接口
                    cellMinWidth: 80,
                    //toolbar: '#toolbarDemo',
                    page: true,
                    cols: [[
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'VendorCode', fixed: 'left', width: 120, title: '供应商编码', sort: true, totalRow: '合计：' },
                        { field: 'VendorName', width: 130, title: '供应商名称' },
                        { field: 'VendorNick', width: 100, title: '供应商简称' },
                        { field: 'VendorLevel', width: 100, title: '供应商等级' },
                        { field: 'VendorScore', width: 120, title: '供应商评分' },
                        { field: 'Tel', width: 120, title: '供应商电话' },
                        { field: 'Remark', width: 80, title: '备注' },
                    ]],
                });
            }
            getCheckData();

            // 搜索提交
            var form = layui.form;
            form.on('submit(demo-table-search)', function (data) {
                var field = data.field; // 获得表单字段
                // 执行搜索重载
                var vendorCode = $("#VendorCode").val();
                var vendorName = $("#VendorName").val();
                var vendorNick = $("#VendorNick").val();
                table.reload('test', {
                    page: {
                        curr: 1 // 重新从第 1 页开始
                    },
                    where: {
                        vendorCode: vendorCode,
                        vendorName: vendorName,
                        vendorNick: vendorNick
                    }
                });
                return false; // 阻止默认 form 跳转
            });
        });
    </script>
</body>
</html>